<template>
  <view class="container">
    <image class="bg-image" src="/static/image.jpg" mode="aspectFill"></image>
    
    <view class="content">
      <!-- 用户信息卡片 -->
      <view class="user-card" @click="goToUserDetail">
        <view class="user-info">
          <image class="avatar" :src="userInfo.user_head || '/static/me.png'" mode="aspectFill"/>
          <view class="user-detail">
            <text class="nickname">{{ userInfo.user_name || '昵称' }}</text>
			<br>
            <text class="user-id">uid: {{ userInfo.user_account || '123456' }}</text>
          </view>
          <text class="arrow">></text>
        </view>
      </view>

      <!-- 菜单列表 -->
      <view class="menu-list">
       <!-- <view class="menu-item" @click="goToHistory">
          <text class="menu-text">学习历史</text>
          <text class="arrow">></text>
        </view> -->
		<view class="menu-item" @click="goToChangePassword">
		  <text class="menu-text">修改密码</text>
		  <text class="arrow">></text>
		</view>
        <view class="menu-item" @click="handleLogout">
          <text class="menu-text">退出登录</text>
          <text class="arrow">></text>
        </view>
      </view>

      <!-- 底部导航栏 -->
      <view class="tab-bar">
        <view class="tab-item" @click="goToHome">
          <image src="/static/home.png" mode="aspectFit" class="tab-icon"/>
         <!-- <text class="tab-text">单词</text> -->
        </view>
        <view class="tab-item active">
          <image src="/static/me.png" mode="aspectFit" class="tab-icon"/>
         <!-- <text class="tab-text">我的</text> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { me } from '@/api/user.js'

export default {
  data() {
    return {
      userInfo: {}
    }
  },
  onShow() {
    this.getUserInfo()
  },
  methods: {
    goToHome() {
      uni.navigateTo({
        url: '/pages/home/home'
      })
    },
    handleLogout() {
        try {
            // 清空所有本地存储数据
            uni.clearStorageSync()
            
            // 显示退出成功提示
            uni.showToast({
                title: '退出成功',
                icon: 'success',
                duration: 1500
            })

            // 延迟跳转到登录页面
            setTimeout(() => {
                uni.reLaunch({
                    url: '/pages/login/login'
                })
            }, 1500)
        } catch (error) {
            console.error('退出登录失败:', error)
            uni.showToast({
                title: '退出失败，请重试',
                icon: 'none'
            })
        }
    },
    goToUserDetail() {
      uni.navigateTo({
        url: '/pages/user/userDetail'
      })
    },
    goToChangePassword() {
      uni.navigateTo({
        url: '/pages/user/changePassword'
      })
    },
    goToHistory() {
      uni.navigateTo({
        url: '/pages/user/history'
      })
    },
    async getUserInfo() {
      try {
        const res = await me()
        if (res.data.code = 2000) {
          this.userInfo = res.data
        }
      } catch (error) {
        console.error('获取用户信息失败:', error)
      }
    }
  }
}
</script>

<style>
.container {
  position: relative;
  min-height: 100vh;
  padding-bottom: 50px;
}

.bg-image {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
}

.content {
  position: relative;
  z-index: 1;
  padding: 20px;
}

/* 用户信息卡片 */
.user-card {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 20px;
  margin-top: 50px;
  margin-bottom: 20px;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  margin-right: 15px;
}

.user-detail {
  flex: 1;
}

.nickname {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin-bottom: 5px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.2);
}

.user-id {
  font-size: 14px;
  color: #666;
}

/* 菜单列表 */
.menu-list {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 0 15px;
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-text {
  font-size: 16px;
  color: #333;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.2);
}

.arrow {
  color: #666;
  font-size: 16px;
}

/* 底部导航栏 */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  padding: 10px 0;
  z-index: 2;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tab-icon {
  width: 30px;
  height: 30px;
  margin-bottom: 4px;
  opacity: 0.8;
  transition: all 0.3s ease;
}

.active .tab-icon {
  opacity: 1;
}
</style>